<template>
	<view id="achievement" v-if="result">
		<view class="score">
			<text>{{ result.score }}</text>
			<text>{{ result.grades}}</text>
		</view>
		<view class="info">
			<image src="../../../static/user/avatar.png"></image>
			<view class="title">
				<text>获得称号</text>
				<text>{{ result.title}}</text>
			</view>
			<view class="detail">
				<view class="text">总分：<text>{{ result.totalscore }}</text>分</view>
				<view class="text">耗时：<text>{{ result.duration }}</text>分钟</view>
			</view>
		</view>
		<view class="topic-info">
			<view>
				<text class="right">{{ result.rightsquescou }}</text>
				<text>答对</text>
			</view>
			<view>
				<text class="wrong">{{ result.errorsquescou }}</text>
				<text>答错</text>
			</view>
			<view>
				<text class="undo">{{ result.nansweredsquescou }}</text>
				<text>未答</text>
			</view>
		</view>
		<view class="action">
			<view class="actionFirst" @click="review(0)">
				<image src="../../../static/achievement/wrong.png"></image>
				<text>查看错题</text>
			</view>
			<view @click="review(1)">
				<image src="../../../static/achievement/review.png"></image>
				<text>回顾试卷</text>
			</view>
		</view>
		<u-button @click="handleReexam" v-if="rexamFalse == null" class="button" shape="circle" :ripple="true">再考一次</u-button>
	</view>
</template>

<script>
import exam from '../../../mixins/exam.js';
export default {
	mixins: [exam],
	onLoad({ upid, reload = true, reexamHandler }) {
		this.reload = reload;
		this.reexamHandler = reexamHandler;
		this.request
			.get(`/app/proposition/getTranscript`, {
				upid
			})
			.then(res => {
				this.result = res;
				this.rexamFalse=res.ueid
			});
	},
	data() {
		return {
			result: null, //考试成绩信息
			reexamHandler: null, //重考处理
			reload: null ,//点击返回时，是否刷新目标页面数据
			rexamFalse:false,//重考按钮显示
		};
	},
	onBackPress(options) {
		if (options.from === 'navigateBack') {
			return false;
		}
		this.back();
		return true;
	},
	methods: {
		back() {
			const pages = getCurrentPages();
			this.reload === 'true' && pages[pages.length - 2].$vm.init();
			uni.navigateBack();
		},
		async handleReexam() {
			const { upid, paperid } = this.result;
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const res = await this.request.get('/app/proposition/redoPaper', { upid, paperid });
			this.reexamHandler && this[this.reexamHandler](res, 'redirectTo');
		},
		review(isCorrect) {
			const { upid, paperid, errorsquescou, rightsquescou } = this.result;
			const apiSetting = {
				method: 'get',
				url: '/app/proposition/getlookBackQuestion',
				params: {
					upid,
					paperid,
					isCorrect
				}
			};
			let setting={
				correctCount: this.result.rightsquescou,
				errorCount: this.result.errorsquescou
			}
			const answerPageSetting = {
				navTitle: isCorrect ? '回顾试题' : '查看错题',
				correcting: true,
				showFalseCount: false,
				showRightCount: false,
				correctCount:this.result.rightsquescou,
				errorCount:this.result.errorsquescou
			};
			
			this.startAnswer(apiSetting, answerPageSetting);
		}
	}
};
</script>
<style>
page {
	background: #fafafa;
}
</style>
<style lang="scss">
#achievement {
	width: 100%;
	height: 100%;
	background: url(../../../static/achievement/bg.png) no-repeat;
	background-size: 100% auto;
	> view {
		margin: 0 40upx;
	}
	.score {
		width: 306upx;
		height: 306upx;
		margin: 0 auto;
		background: url(../../../static/achievement/circle.png) no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-weight: 400;
		text:first-child {
			font-size: 78upx;
			letter-spacing: 1.56upx;
		}
		text {
			font-size: 28upx;
		}
	}
	.info {
		display: flex;
		align-items: center;
		color: #ffffff;
		image {
			width: 68upx;
			height: 68upx;
			border: 4upx solid rgba(255, 255, 255, 0.25);
			border-radius: 50%;
			overflow: hidden;
			margin-right: 25upx;
		}
		view {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.title {
			flex: 1;
			font-weight: 500;
			text:first-child {
				opacity: 0.8;
				font-size: 28upx;
				font-weight: 400;
			}
			text {
				font-size: 34upx;
			}
		}
		.detail {
			.text{
				width: 100%;
				font-size: 28upx;
				font-weight: 400;
				flex-direction: initial;
				line-height: 40upx;
				text{
					font-weight: bold;
					font-size: 32upx;
					margin-right: 6upx;
				}
			}
		}
	}
	.topic-info {
		height: 200upx;
		background: #ffffff;
		border-radius: 30upx;
		margin-top: 40upx;
		box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		text-align: center;
		view {
			display: flex;
			flex-direction: column;
			text:first-child {
				font-size: 50upx;
				font-weight: bold;
			}
			text {
				font-size: 32upx;
				font-weight: 400;
				color: #363940;
			}

			.wrong {
				color: #f45c4b;
			}
			.right {
				color: #5fba4a;
			}
			.undo {
				color: #a1a2a6;
			}
		}
	}
	.action {
		height: 110upx;
		background: #ffffff;
		border-radius: 24upx;
		box-shadow: 0px 4upx 16upx 0upx rgba(0, 0, 0, 0.1);
		margin-top: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
		view {
			display: flex;
			align-items: center;
			image {
				width: 40upx;
				height: 40upx;
				margin-right: 22upx;
			}
		}
		text{
			font-size: 32upx;
		}
	}
	.action::after{
		content: '';
		display: block;
		width: 1px;
		background: #E6E6E6;
		height: 60%;
		position: absolute;
		left: 50%;
		top: 20%;
	}
}
.button {
	width: 350upx;
	height: 76upx;
	position: absolute !important;
	bottom: 80upx;
	left: 0;
	right: 0;
	font-size: 32upx;
	background: $linear-bg;
	color: #ffffff !important;
}
.button::after {
	border: none !important;
}
</style>